<template>
	<view>
		<home style="height: calc(100vh - 100rpx);" v-if="PageCur=='home'"></home>
		<orders style="height: calc(100vh - 100rpx);" v-if="PageCur=='orders'"></orders>
		<me style="height: calc(100vh - 100rpx);" v-if="PageCur=='me'"></me>
		<view class="cu-bar tabbar bg-white shadow foot uy">
			<view class="action" @click="NavChange" data-cur="me">
				<view :class="PageCur=='me'?'cuIcon-myfill text-green':'text-gray cuIcon-myfill'"></view>
				<view :class="PageCur=='me'?'text-green':'text-gray'" > {{curLang.me}} </view>
			</view>
			<view class="action" @click="NavChange" data-cur="orders">
				<view :class="PageCur=='orders'?'cuIcon-newfill text-green':'text-gray cuIcon-newfill'"></view>
				<view :class="PageCur=='orders'?'text-green':'text-gray'"> {{curLang.order}} </view>
			</view>
			<view class="action" @click="NavChange" data-cur="home">
				<view :class="PageCur=='home'?'cuIcon-homefill text-green':'text-gray cuIcon-homefill'"></view>
				<view :class="PageCur=='home'?'text-green':'text-gray'"> {{curLang.home}} </view>
			</view>
		</view>
	</view>
</template>

<script>
	import Http from "../../Http.js";
	import Lang from "../../Lang.js";
	export default {
		data() {
		return {
				PageCur: 'home',
				lang:'uy',
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		},
		onLoad() {
			if(this.lang=='uy'){
				this.curLang = Lang.uy;
			}
		}
	}
</script>

<style>
	.container{
		width: 100%;
		height: calc( 100vh - calc(44px + env(safe-area-inset-top)) );
		background-color: #007AFF;
	}
</style>
